<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>文件列表</title>
    <link rel="stylesheet" href="/index/index.css">
    <link rel="stylesheet" href="/index/media_index.css">
    <link rel="stylesheet" href="/index/audio.css">
    <script src="/index/index.js"></script>
</head>
<div class="container">
    <h1>1999歌曲下载</h1>
    <div class="search-container">
        <input type="text" id="searchInput" placeholder="输入歌曲名来进行搜索..." class="search-box">
    </div>
    <ul class="file-list" >
        <% files.forEach(file=> { %>
            <li class="file-item" data-file="<%= file %>">
                <% if (file.toLowerCase().endsWith('.mp3')) { %>
                    <div class="audio-wrapper">
                        <div class="meta-info">
                            <span class="file-name">
                                <%= file %>
                            </span>
                            <div class="controls">
                                <button class="play-pause-btn"
                                    data-src="/stream/<%= encodeURIComponent(file) %>">播放</button>
                                <a href="/download/<%= encodeURIComponent(file) %>" class="download-btn">下载</a>
                            </div>
                        </div>
                        <progress class="progress-bar" value="0" max="100"></progress>
                    </div>
                    <% } else { %>
                        <a href="/download/<%= encodeURIComponent(file) %>" class="file-link">
                            <%= file %>
                        </a>
                        <% } %>
            </li>
            <% }) %>
    </ul>
</div>
<script src="/index/audio.js"></script>
</html>